<template>
  <div>
    <el-dialog
      :title="element.options.name"
      :visible.sync="element.options.dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      :width="`${element.options.width + '%'}`"
    >
      <div>
        <low-parse
          v-if="storeJson"
          :key="parseKey"
          ref="parse"
          :store="storeJson"
          @storeInit="storeInit"
        ></low-parse>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-for="(handle, index) in element.handles"
          :type="handle.type"
          :key="index"
          @click="handleClick(handle.eventCode)"
          >{{ handle.name }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Store } from "@/low-code/utils/store.js";
export default {
  props: ["element", "data", "index"],
  data() {
    return {
      parseKey: 0,
      storeJson: "",
    };
  },
  watch: {
    "element.options.dialogVisible": {
      handler(show) {
        if (show) {
        let formId=this.element.options.defaultValue
        console.log("formId", this.element.options.defaultValue);
        formId &&
          Store.axios({
            method: "get",
            url: Store.prefixUrl + "/editorFormTemplate",
            params: {
              id: formId,
            },
          }).then((result) => {
            let storeJson = JSON.parse(result.data.data.formTemplate);
            storeJson.params=this.element.params
            this.storeJson = storeJson
            this.parseKey++;
            this.$nextTick(()=>{
              if (this.$refs['parse']) {
                this.store.dialogController.setCurrentDialogStore(this.$refs['parse'].initStore)
              }
            })
          });
        }
      },
      immediate: true, //刷新加载 立马触发一次handler
    },
  },
  methods: {
    storeInit(store){
       this.store.dialogController.currentDialogStore=store
    },
    handleClick(eventCode) {
      eventCode &&
        this.store.eventCenter
          .fire(eventCode, {
            triggerSource: this.element,
            dialog:this.store.dialogController.getDialog()
          })
          .then((res) => {
            if (res) {
               this.element.options.dialogVisible = false;
            }
          });
    },
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
  },
};
</script>

<style lang="scss" scoped></style>
